<template>
  <div class="address">
    <header>
      <div class="back-icon flex">
        <img
          src="@/utils/img/left-icon.png"
          alt=""
          srcset=""
          class="backLast"
        />
      </div>
      <div class="back-title flex">选择地址</div>
      <div class="back-icon"></div>
    </header>
    <section>
      <div class="choose">
        <div class="icon flex">
          <img src="@/utils/img/down_icon.png" alt="" srcset="" />
        </div>
        <div class="choose-input flex">
          <input
            type="text"
            class="input"
            placeholder="请输入写字楼，小区，学校等"
          />
        </div>
      </div>
      <div class="now-address">
        <p class="now-text">当前地址</p>
        <p class="address-text address-p"></p>
        <p class="new-position">
          <img src="@/utils/img/find_icon.png" alt="" />
          重新定位
        </p>
      </div>
      <div class="now-address">
        <p class="now-text">附近地址</p>
        <p class="near-address address-text"></p>
      </div>
      <div id="allmap"></div>
    </section>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },

  methods: {},
  created() {
    //
    let bMapTransQQMap = function(lng, lat) {
      let x_pi = (3.14159265358979324 * 3000.0) / 180.0;
      let x = lng - 0.0065;
      let y = lat - 0.006;
      let z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
      let theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
      let lngs = z * Math.cos(theta);
      let lats = z * Math.sin(theta);

      return {
        lng: lngs.toFixed(3),
        lat: lats.toFixed(3)
      };
    };

    var map = new BMapGL.Map("allmap");
    var point = new BMapGL.Point(116.331398, 39.897445);
    map.centerAndZoom(point, 12);

    function myFun(result) {
      var cityName = result.name;
      map.setCenter(cityName);
      console.log(bMapTransQQMap(result.center.lng, result.center.lat));
    }
    var myCity = new BMapGL.LocalCity();
    myCity.get(myFun);

    aMapSearchNearBy([116.404, 39.915]);
    let again = document.querySelector(".new-position");
    again.onclick = function() {
      aMapSearchNearBy([116.404, 39.915]);
    };
    //
  }
};
</script>
<style lang="" scoped>
html,
body,
.address {
  width: 100%;
  height: 100%;
  font-size: 14px;
}

.address {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: #ffffff;
}
img {
  width: 100%;
  height: auto;
  display: block;
}
header {
  width: 100%;
  height: 50px;
  background: #ffffff;
  display: flex;
  border-bottom: 1px solid #ebebeb;
}

section {
  flex: 1;
  overflow: auto;
}
section::-webkit-scrollbar {
  display: none;
}

.back-icon {
  width: 40px;
}
.back-title {
  flex: 1;
  font-size: 14px;
}
.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.choose {
  width: 100%;
  height: 40px;
  display: flex;
  margin-top: 5px;
}
.icon {
  width: 45px;
}
.choose-input {
  flex: 1;
  padding: 4px;
  box-sizing: border-box;
}
.input {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  background-color: #ebebeb;
  color: #808080;
  padding-left: 5px;
}

.now-address {
  width: 100%;
  position: relative;
}
.new-position {
  position: absolute;
  right: 10px;
  top: 16px;
  color: #0591a8;
  display: block;

  display: flex;
  justify-content: center;
  align-items: center;
}
.new-position img {
  width: 20px;
  height: auto;
  display: block;
  margin-right: 3px;
}
.now-text {
  width: 100%;
  height: 1rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: #a0a0a0;
  background-color: #f7f7f7;
  padding-left: 10px;
  box-sizing: border-box;
}
.address-text {
  background-color: #fff;

  box-sizing: border-box;
}
.address-p {
  margin-top: 10px;
  color: #4c4c4c;
  font-weight: 540;
  font-size: 13px;
  padding: 10px;
  box-sizing: border-box;
}
</style>
